<template>
  <view class="article-list">
    <!-- 顶部搜索框 -->
    <view class="search-box">
      <u-search
        v-model="keyword"
        placeholder="搜索文章"
        :show-action="false"
        @search="onSearch"
        height="70rpx"
        margin="0"
        shape="round"
        bg-color="#f2f2f2"
      ></u-search>
    </view>

    <!-- 文章分类标签 -->
    <view class="category-tabs">
      <scroll-view scroll-x class="tabs-scroll">
        <view 
          class="tab-item" 
          :class="{ active: currentCategory === index }"
          v-for="(item, index) in categories" 
          :key="index"
          @click="changeCategory(index)"
        >
          {{item.name}}
        </view>
      </scroll-view>
    </view>

    <!-- 文章列表 -->
    <view class="list-container">
      <view 
        class="article-item" 
        v-for="(item, index) in articleList" 
        :key="index"
        @click="goDetail(item.id)"
        :style="{ animationDelay: index * 0.05 + 's' }"
      >
        <view class="article-content">
          <view class="article-title">{{item.title}}</view>
          <view class="article-desc">{{item.description}}</view>
          <view class="article-info">
            <text class="time"><u-icon name="calendar" size="24rpx" color="#999"></u-icon> {{item.createTime}}</text>
            <text class="read-count"><u-icon name="eye" size="24rpx" color="#999"></u-icon> {{item.readCount}}阅读</text>
          </view>
        </view>
        <view class="article-image">
          <u--image
            :src="item.coverImage"
            width="200rpx"
            height="160rpx"
            radius="8"
            :fade="true"
            mode="aspectFill"
          ></u--image>
        </view>
      </view>
    </view>

    <!-- 上拉加载更多 -->
    <u-loadmore
      :status="loadStatus"
      @loadmore="loadMore"
      icon-type="flower"
      color="#0E9C98"
    />
    
    <!-- 回到顶部按钮 -->
    <view class="back-to-top" v-show="showBackTop" @click="scrollToTop">
      <u-icon name="arrow-upward" color="#fff" size="40"></u-icon>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      keyword: '',
      page: 1,
      loadStatus: 'loadmore', // loadmore, loading, nomore
      showBackTop: false,
      currentCategory: 0,
      categories: [
        { id: 0, name: '全部' },
        { id: 1, name: '健康生活' },
        { id: 2, name: '科技资讯' },
        { id: 3, name: '美食烹饪' },
        { id: 4, name: '旅游攻略' },
        { id: 5, name: '时尚潮流' }
      ],
      articleList: [
        {
          id: 1,
          title: '如何提高工作效率？十个实用小技巧',
          description: '在当今快节奏的工作环境中，提高工作效率显得尤为重要，本文将分享十个实用技巧...',
          coverImage: 'https://via.placeholder.com/200x160',
          createTime: '2024-01-20',
          readCount: 1234
        },
        {
          id: 2,
          title: '健康饮食指南：每天应该吃什么？',
          description: '均衡的饮食对健康至关重要，本文将为您介绍日常饮食的黄金搭配...',
          coverImage: 'https://via.placeholder.com/200x160',
          createTime: '2024-01-18',
          readCount: 2156
        },
        {
          id: 3,
          title: '2024年最值得期待的科技产品',
          description: '随着技术的不断发展，2024年将有哪些令人兴奋的科技产品问世？',
          coverImage: 'https://via.placeholder.com/200x160',
          createTime: '2024-01-15',
          readCount: 3678
        },
        {
          id: 4,
          title: '居家办公的环境布置技巧',
          description: '如何打造一个高效舒适的居家办公环境？这些布置技巧不容错过...',
          coverImage: 'https://via.placeholder.com/200x160',
          createTime: '2024-01-12',
          readCount: 1987
        },
        {
          id: 5,
          title: '春季旅游最佳目的地推荐',
          description: '春暖花开，正是出游好时节。这些目的地将给您带来难忘的春季旅行体验...',
          coverImage: 'https://via.placeholder.com/200x160',
          createTime: '2024-01-10',
          readCount: 2543
        },
        {
          id: 6,
          title: '如何培养良好的阅读习惯？',
          description: '阅读是获取知识的重要途径，本文分享如何在忙碌的生活中培养阅读习惯...',
          coverImage: 'https://via.placeholder.com/200x160',
          createTime: '2024-01-08',
          readCount: 1765
        }
      ]
    }
  },
  onPageScroll(e) {
    this.showBackTop = e.scrollTop > 300
  },
  methods: {
    onSearch() {
      // 搜索逻辑
      this.page = 1
      this.getArticleList()
    },
    goDetail(id) {
      uni.navigateTo({
        url: `/pages/article/detail?id=${id}`
      })
    },
    loadMore() {
      if (this.loadStatus !== 'loadmore') return
      this.loadStatus = 'loading'
      
      // 模拟加载更多数据
      setTimeout(() => {
        if (this.page >= 3) {
          this.loadStatus = 'nomore'
        } else {
          this.page++
          this.getArticleList()
          this.loadStatus = 'loadmore'
        }
      }, 1500)
    },
    getArticleList() {
      // 这里调用接口获取文章列表
      // 模拟接口请求
      uni.showLoading({
        title: '加载中...'
      })
      
      setTimeout(() => {
        uni.hideLoading()
        // 实际项目中这里应该是接口返回的数据
      }, 500)
    },
    scrollToTop() {
      uni.pageScrollTo({
        scrollTop: 0,
        duration: 300
      })
    },
    changeCategory(index) {
      if (this.currentCategory === index) return
      this.currentCategory = index
      this.page = 1
      this.getArticleList()
    }
  }
}
</script>

<style lang="scss" scoped>
.article-list {
  min-height: 100vh;
  background-color: #f8f8f8;
  
  .search-box {
    padding: 20rpx 30rpx;
    background-color: #fff;
    position: sticky;
    top: 0;
    z-index: 10;
    box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.05);
  }
  
  .category-tabs {
    background-color: #fff;
    padding: 0 20rpx;
    margin-bottom: 20rpx;
    box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.05);
    
    .tabs-scroll {
      white-space: nowrap;
      width: 100%;
      height: 80rpx;
      
      .tab-item {
        display: inline-block;
        padding: 0 30rpx;
        height: 80rpx;
        line-height: 80rpx;
        font-size: 28rpx;
        color: #666;
        position: relative;
        transition: all 0.3s;
        
        &.active {
          color: #0E9C98;
          font-weight: bold;
          
          &::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 40rpx;
            height: 4rpx;
            background-color: #0E9C98;
            border-radius: 2rpx;
          }
        }
      }
    }
  }
  
  .list-container {
    padding: 20rpx 30rpx;
    
    .article-item {
      display: flex;
      justify-content: space-between;
      padding: 30rpx;
      margin-bottom: 30rpx;
      background-color: #fff;
      border-radius: 16rpx;
      box-shadow: 0 4rpx 16rpx rgba(0,0,0,0.05);
      animation: fadeInUp 0.5s ease forwards;
      transform: translateY(20rpx);
      opacity: 0;
      
      .article-content {
        flex: 1;
        margin-right: 30rpx;
        
        .article-title {
          font-size: 32rpx;
          font-weight: bold;
          color: #333;
          line-height: 1.4;
          margin-bottom: 16rpx;
          // 文字超出两行显示省略号
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;
        }
        
        .article-desc {
          font-size: 28rpx;
          color: #666;
          line-height: 1.5;
          margin-bottom: 20rpx;
          // 文字超出一行显示省略号
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 1;
          overflow: hidden;
        }
        
        .article-info {
          font-size: 24rpx;
          color: #999;
          display: flex;
          align-items: center;
          
          .time {
            margin-right: 30rpx;
            display: flex;
            align-items: center;
          }
          
          .read-count {
            display: flex;
            align-items: center;
          }
        }
      }
      
      .article-image {
        width: 200rpx;
        height: 160rpx;
        border-radius: 8rpx;
        overflow: hidden;
        box-shadow: 0 4rpx 8rpx rgba(0,0,0,0.1);
      }
      
      &:active {
        transform: scale(0.98);
        transition: transform 0.2s;
      }
    }
  }
  
  .back-to-top {
    position: fixed;
    right: 30rpx;
    bottom: 100rpx;
    width: 80rpx;
    height: 80rpx;
    background-color: #0E9C98;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4rpx 16rpx rgba(14,156,152,0.3);
    z-index: 99;
    animation: fadeIn 0.3s;
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20rpx);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
</style>